<template>
  <div class="movieMsg">
    <v-loading v-bind:loading="loading"></v-loading>
    <div class="title">
      <div class="back" v-on:click="goBack"></div>
      <p v-text="movieMsg.title"></p>
    </div>
    <div class="movie-msg" v-if="showMsg">
      <div class="msg-img">
        <img v-bind:src="movieMsg.images.large">
      </div>
      <div class="msg-info">
        <h4 v-text="movieMsg.title"></h4>
        <p>评分：{{ movieMsg.rating.average }}（{{ movieMsg.ratings_count }}人评价）</p>
        <p>导演：{{ movieMsg.directors | getNames }}</p>
        <p>主演：{{ movieMsg.casts | getNames }}</p>
        <p>类型：{{ movieMsg.genres | getGenres }}</p>
        <p>年份：{{ movieMsg.year }}</p>
        <p>制片国家/地区：{{ movieMsg.countries | getGenres }}</p>
        <p>又名：{{ movieMsg.aka | getGenres }}</p>
      </div>
    </div>
    <div class="msg-summary" v-if="showMsg">
      <h3>影片简介：</h3>
      <p>{{ movieMsg.summary }}</p>
    </div>
    <div class="msg-casts" v-if="showMsg">
        <h3>演职人员：</h3>
        <div class="show-casts" v-for="item in movieMsg.casts">
            <div class="cast-photo">
              <img v-bind:src="item.avatars.large" v-bind:alt="item.alt">
            </div>
            <div class="cast-name" v-text="item.name"></div>
        </div>
    </div>
  </div>
</template>

<script>
  import { getMovie } from '../config/api.js'
  import { getNames, getGenres } from '../config/filter.js'
  import loading from '../page/loading.vue'
  export default {
    data () {
      return {
        /* 用到的参数最好在这里初始化，不然虽然会渲染成功，但控制台会报错 */
        movieType: 'subject',
        movieMsg: {
          rating: {
            average: ''
          },
          year: '',
          images: {},
          id: '',
          title: '',
          countries: [],
          genres: [],
          casts: [],
          original_title: '',
          summary: '',
          directors: [],
          rating_count: '',
          aka: []
        },
        loading: true,
        showMsg: false
      }
    },
    filters: {
      getNames,
      getGenres
    },
    methods: {
      goBack: function () {
        window.history.go(-1)
      }
    },
    mounted: function () {
      let movieType = this.movieType + '/' + this.$route.params.key
      getMovie(this.$http, movieType)
      .then((response) => {
        this.loading = false
        this.showMsg = true
        this.movieMsg = response.body
      }, (response) => {
        this.$router.push({
          path: '/page404'
        })
      })
    },
    components: {
      'v-loading': loading
    }
  }
</script>
